<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tag/localeTag.tld" prefix="t"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Q & A</title>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="resources/js/qanda.js"></script>
<!-- <script type="text/javascript" src="resources/js/registration.js"></script>
<script type="text/javascript" src="resources/js/registrationValid.js"></script>
<script type="text/javascript" src="resources/js/moderatorCategories.js"></script> -->
</head>
<body>
	<jsp:include page="parts/header.jsp"></jsp:include>
	<jsp:include page="parts/navigation.jsp"></jsp:include>
	<div class="content">
		<jsp:include page="parts/leftmenu.jsp"></jsp:include>
		<div class="page">
			<div class="col-xs-12">
				<h1>
					<t:locale mName="account.title" />
				</h1>
				<c:if test="${user.status==true}">
					<h4>
						<span class="label label-danger">
							<span class="glyphicon glyphicon-lock"></span>
							<t:locale mName="header.banned" />
							<t:locale mName="account.unbanDate" />
							<c:if test="${not empty user.dateBanOff}">
							${user.dateBanOff}</c:if>
							<c:if test="${empty user.dateBanOff}">
							Permanent</c:if>
						</span>
					</h4>
				</c:if>
			</div>
			<form class="form-horizontal" role="form" enctype="multipart/form-data" method="POST" action="uploadImg">
				<div class="form-group">
					<label for="avatarImg" class="col-xs-2 control-label"></label>
					<div class="col-xs-3">
						<img src="${user.photo}" id="avatarImg" class="img-rounded photo text-center" alt="Avatar">
					</div>
					<div class="col-xs-4">
						<c:if test="${not empty user && user.roleId !=1}">
							<h3>
								<t:locale mName="account.rating" />
								<span class="label label-info">${user.rating}</span>
							</h3>
						</c:if>
					</div>
				</div>
				<div class="form-group">
					<label for="inputFile" class="col-xs-2 control-label">
						<t:locale mName="account.photo" />
					</label>
					<div class="col-xs-6">
						<input type="file" class="form-control filestyle" data-buttonText='<t:locale mName="account.findPhoto"/>' data-buttonBefore="true" id="inputFile" name="inputFile">
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2 col-xs-6">
						<button type="submit" class="btn btn-success">
							<t:locale mName="account.uploadPhoto" />
							<span class="glyphicon glyphicon-floppy-open"></span>
						</button>
					</div>
				</div>
			</form>
			<form class="form-horizontal" role="form" id="account-data-form" method="POST" action="accountUpdate">
				<div class="form-group">
					<label for="inputLogin" class="col-xs-2 control-label">
						<t:locale mName="login" />
					</label>
					<div class="col-xs-6">
						<input type="text" class="form-control" id="inputLogin" name="inputLogin" placeholder="<t:locale mName="login"/>" value="${user.login}" disabled>
						<span class="statusLogin"></span>
					</div>
				</div>
				<div class="form-group">
					<label for="inputEmail" class="col-xs-2 control-label">
						<t:locale mName="email" />
					</label>
					<div class="col-xs-6">
						<input type="text" class="form-control" id="inputEmail" name="inputEmail" placeholder="<t:locale mName="email"/>" value="${user.email }">
						<span class="statusEmail"></span>
					</div>
				</div>
				<div class="form-group">
					<label for="inputFName" class="col-xs-2 control-label">
						<t:locale mName="firstName" />
					</label>
					<div class="col-xs-6">
						<input type="text" class="form-control" id="inputFName" name="inputFName" placeholder="<t:locale mName="firstName"/>" value="${user.fName }">
					</div>
				</div>
				<div class="form-group">
					<label for="inputLName" class="col-xs-2 control-label">
						<t:locale mName="lastName" />
					</label>
					<div class="col-xs-6">
						<input type="text" class="form-control" id="inputLName" name="inputLName" placeholder="<t:locale mName="lastName"/>" value="${user.lName }">
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2 col-xs-6">
						<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#changepassword">
							<t:locale mName="account.changePassword" />
						</button>
					</div>
				</div>
				<div id="changepassword" class="collapse">
					<div class="form-group">
						<label for="inputOldPassword" class="col-xs-2 control-label">
							<t:locale mName="account.oldPassword" />
						</label>
						<div class="col-xs-6">
							<input type="password" class="form-control" id="inputOldPassword" name="inputOldPassword" placeholder="<t:locale mName="account.oldPassword"/>">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-xs-2 control-label">
							<t:locale mName="password" />
						</label>
						<div class="col-xs-6">
							<input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="<t:locale mName="password"/>">
						</div>
					</div>
					<div class="form-group">
						<label for="inputConfirmPassword" class="col-xs-2 control-label">
							<t:locale mName="confirmPassword" />
						</label>
						<div class="col-xs-6">
							<input type="password" class="form-control" id="inputConfirmPassword" name="inputConfirmPassword" placeholder="<t:locale mName="confirmPassword"/>">
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2 col-xs-6">
						<button type="submit" class="btn btn-success">
							<t:locale mName="account.update" />
							<span class="glyphicon glyphicon-floppy-save"></span>
						</button>
					</div>
				</div>
			</form>
			<form class="form-horizontal" role="form" method="GET" action="pmanageCategory">
				<div class="form-group">
					<c:if test="${not empty user && user.roleId!=1}">
						<div class="col-xs-offset-2 col-xs-4">
							<button type="submit" class="btn btn-info">
								<span class="glyphicon glyphicon-pencil"></span>
								<t:locale mName="account.subscribe" />
							</button>
						</div>
					</c:if>
					<c:if test="${not empty user && user.roleId==2}">
						<div class="form-horizontal" role="form">
							<div class="form-group">
								<div class="col-xs-4">
									<button type="button" class="btn btn-info" onclick="moderatorCategoriesClick()">
										<span class="glyphicon glyphicon-list-alt"></span>
										<t:locale mName="account.moderatorCategories" />
									</button>
								</div>
							</div>
							<div id="moderatorCategories">
								<div class="form-group">
									<div class="col-xs-6">
										<h2>
											<t:locale mName="account.moderatorCategories" />
										</h2>
									</div>
									<div class="col-xs-6 text-right">
										<span onclick="moderatorCategoriesClose()" class="glyphicon glyphicon-remove"></span>
									</div>
								</div>
								<div id="content-moderatorCategories">
									<div class="form-group">
										<div class="col-xs-offset-2 col-xs-6">
											<table>
												<c:forEach var="mc" items="${moderatorCategories}">
													<c:forEach var="c" items="${categories}">
														<c:if test="${c.id==mc.categoryId}">
															<tr>
																<td><h3>
																		<span onclick="selectCategory('${c.name}')" class="col-xs-11">
																			<span class="label label-info">
																				<span class="glyphicon glyphicon-share-alt"></span>
																				${c.name}
																			</span>
																		</span>
																	</h3></td>
															</tr>
														</c:if>
													</c:forEach>
												</c:forEach>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</c:if>
				</div>
			</form>
			<input type="hidden" id="questionId" name="question">
			<form action="showCategoryQuestion" method="GET" id="showCategoryQuestion">
				<input type="hidden" name="categoryName" id="categoryName">
			</form>
		</div>
	</div>
	<jsp:include page="parts/footer.jsp"></jsp:include>
</body>
</html>